<script setup>
import { ref, nextTick } from "vue";
import { useAI } from "@/stores/AI";
import { Pointer, User, Share } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { sparkAiService, VolcengineService } from "@/api/chat";
const AI = useAI();

const userInput = ref("");

const disabled = ref(false);

// 对话函数
const dialog = async () => {
  if (userInput.value.trim() === "") {
    ElMessage.info("请输入内容");
    return;
  }
  // 存入用户输入
  disabled.value = true;
  AI.chat.push(userInput.value);
  userInput.value = "";
  // 提示，请稍等 大约10秒左右回复
  AI.chat.push("请稍等 大约10秒左右回复");
  // 自动滚动到底部
  nextTick(() => {
    const scrollbar = document.querySelector(".el-scrollbar__wrap");
    if (scrollbar) scrollbar.scrollTop = scrollbar.scrollHeight;
  });
  // 调用spark ai接口
  console.log("AI问答：", AI.chat[AI.chat.length - 2]);
  // let result = await sparkAiService(AI.chat[AI.chat.length - 2]);
  let result = await VolcengineService(AI.chat[AI.chat.length - 2]);
  // 处理结果
  if (result.code == 0) {
    // 成功
    disabled.value = false;
    if (result.data) {
      // 将Markdown转换为HTML
      const mdToHtml = (md) => {
        return md
          .replace(/^### (.*$)/gm, '<h3>$1</h3>')
          .replace(/^## (.*$)/gm, '<h2>$1</h2>')
          .replace(/^# (.*$)/gm, '<h1>$1</h1>')
          .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
          .replace(/\*(.*?)\*/g, '<em>$1</em>')
          .replace(/^- (.*$)/gm, '<li>$1</li>')
          .replace(/\n/g, '<br>')
          .replace(/<li>/g, '<ul><li>')
          .replace(/<\/li>/g, '</li></ul>');
      };
      AI.chat[AI.chat.length - 1] = mdToHtml(result.data);
    } else {
      AI.chat[AI.chat.length - 1] = "抱歉，未获取到有效回复";
    }
  }
};
</script>

<template>
  <el-container>
    <el-main>
      <div class="main">
        <el-scrollbar height="650px">
          <el-row v-for="(item, index) in AI.chat" :key="index">
            <el-col :span="24">
              <div v-if="index % 2 == 0">
                <el-icon style="float: left; /* 左浮动 */"><Share /></el-icon>
                <div class="dig" v-html="item"></div>
              </div>
              <div v-else>
                <el-icon style="float: right"><User /></el-icon>
                <!-- :suffix-icon="'User'" 为后置图标 -->
                <div
                  v-html="item"
                  style="float: right; /* 右浮动 */"
                  class="dig"
                ></div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
        <el-input class="content" v-model="userInput" @keyup.enter="dialog">
          <template #append>
            <el-button @click="dialog" :disabled="disabled"
              ><el-icon><Pointer /></el-icon
            ></el-button>
          </template>
        </el-input>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped lang = "scss">
@import "@/assets/style/config.scss";
.main {
  margin: 0 auto;
  max-width: 70%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: $borderRadius;
  padding: 15px;
}
.content {
  padding: 5px;
  margin-top: 20px;
  height: 80px;
  font-size: 18px;
  padding-bottom: 0;
}
.dig {
  max-width: 80%;
  display: inline-block; /* 使 div 的宽度随内容自适应 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
}
/*搜索button按钮 */
:deep(.el-input-group__append) {
  background: rgba(0, 135, 253, 0.2);
  border: 0;
  box-shadow: 0 0 0 0px;
}
</style>
@/api/chat